<template>
  <div class="con">
    <p class="titlelist6_10">
      积分管理
      <span style="color: #999">&nbsp;&nbsp;/&nbsp;&nbsp;</span>兑换商品
    </p>
    <div class="content">
      <div class="sousuojg6_10">
        <div class="box">
          <div class="title" style="margin-bottom:20px">基本信息</div>
          <div class="container">
            <div class="lister">
              <div class="listerTitle">规则名称：</div>
              <div class="listerCont">
                <el-input v-model="input" placeholder="请输入内容"></el-input>
              </div>
            </div>
            <div class="lister">
              <div class="listerTitle">规则说明：</div>
              <div class="listerCont">
                <el-input
                  v-model="input"
                  style="width: 600px"
                  type="textarea"
                  :rows="4"
                  placeholder="请输入内容"
                ></el-input>
              </div>
            </div>
          </div>
          <div style="clear: both"></div>
          <div class="title" style="margin-top: 20px">商品信息</div>
          <el-table
            style="margin-top: 30px"
            :data="list"
            tooltip-effect="dark"
            :header-cell-style="{ background: '#F9FAFC', color: '#222' }"
            stripe
            border
            :row-style="{ height: '0px' }"
            :cell-style="{ padding: '0px' }"
            ref="multipleTable"
          >
            <el-table-column
              min-width="200"
              label="机构ID"
              prop="channelName"
            ></el-table-column>
            <el-table-column
              min-width="200"
              label="机构名称"
              prop="channelName"
            ></el-table-column>
            <el-table-column
              min-width="200"
              label="规则类型"
              prop="channelName"
            ></el-table-column>
            <el-table-column
              min-width="200"
              label="规则名称"
              prop="channelName"
            ></el-table-column>
            <el-table-column
              min-width="200"
              label="规则状态"
              prop="channelName"
            >
              <template slot-scope="scope">
                <div>
                  <el-switch
                    v-model="values"
                    active-color="#13ce66"
                    active-value="0"
                    inactive-value="1"
                    inactive-color="#cccccc"
                  >
                  </el-switch>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              min-width="200"
              label="创建时间"
              prop="channelName"
            ></el-table-column>
            <el-table-column min-width="200" label="操作">
              <template slot-scope="scope">
                <div>
                  <el-button type="text" @click="cat(scope.row)"
                    >查看</el-button
                  >
                  <el-button type="text" @click="set(scope.row)"
                    >操作</el-button
                  >
                </div>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[20, 50, 100]"
            :page-size="20"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          channelName: "123",
        },
      ],
    };
  },
  methods: {
    handleCommand(command) {
      console.log(command);
    },
    // 第几页
    handleCurrentChange(val) {
      console.log(val);
    },
    // 每页几条
    handleSizeChange(val) {
      console.log(val);
    },
  },
};
</script>

<style scoped>
.title {
  height: 40px;
  background: #f9fafc;
  line-height: 40px;
  font-size: 18px;
  color: #303133;
  text-indent: 8px;
  font-family: "MicrosoftYaHei";
  color: #303133;
}
.box {
  padding: 0 20px;
}
.lister {
  display: flex;
  margin-bottom: 20px;
}
</style>